<template>
    <div>
        <el-card class="body">
            <!-- 顶部的面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i>四叶草用户</el-breadcrumb-item>
                <el-breadcrumb-item>药品订单</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider content-position="left"></el-divider>

            <el-divider content-position="left">数据表格</el-divider>
            <el-table :data="medicineList">
                <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" width="80" align="center"></el-table-column>
                <el-table-column prop="doctor" label="就诊医生" width="80" align="center"></el-table-column>
                <el-table-column prop="hospital" label="就诊医院" width="230" align="center"></el-table-column>
                <el-table-column prop="medicine" label="药品名称" width="150" align="center"></el-table-column>
                <el-table-column prop="price" label="药品价格" width="80" align="center"></el-table-column>
                <el-table-column prop="visitDate" label="就诊日期" width="120" align="center"></el-table-column>
                <el-table-column prop="isPaid" label="是否付款" width="100" align="center">
                    <template  v-slot="scope">
                        <el-button v-if="scope.row.isPaid===0" type="primary" @click="payment(scope.row)">去支付</el-button>
                        <el-button v-if="scope.row.isPaid===1" type="success" disabled>已支付</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block" style="float: right;margin: 10px 0 10px 0">
                <el-pagination
                    @current-change="changePage"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    layout="total, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>

            <!-- 修改药品信息的弹出窗口 -->
            <el-dialog title="收货地址" :visible.sync="editFormDialogVisible">
                <el-form :model="editForm" label-width="120px">
                    <el-form-item label="患者姓名">
                        <el-input v-model="editForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="收货地址">
                        <el-input v-model="editForm.address"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editFormDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitEditForm()">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";
import SimpleAxios from "@/http/SimpleAxios";

export default {
    data(){
        return{
            loginInfo:[],
            editFormDialogVisible :false,
            editForm:[],
            medicineList:[],
            // 分页相关数据
            currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
            pageSize: 20,
            total: 0,
        }
    },
    methods: {
        loadCurrentLoginInfo(){
            this.loginInfo=JSON.parse(localStorage.getItem('loginInfo'));
        },
        payment(row){
            let payUrl=BaseUrl.ALIPAY+'/alipay/pay?subject='+row.medicine+'&traceNo='+row.id+'&totalAmount='+row.price;
            console.log(payUrl);
            console.log(row);
            window.open(payUrl);
            //在这写个set interval循环请求接口就行
            // 在这里调用 fetchData，并保存定时器引用
            this.fetchData(row);
            this.payment.interval = setInterval(() => this.fetchData(row), 5000);
            // this.$message.success("支付成功");
        },
        fetchData(row){
            // let searchUrl=BaseUrl.ALIPAY+'/alipay/search?tradeNo=76557';
            let searchUrl=BaseUrl.ALIPAY+'/alipay/search?tradeNo='+row.id;
            console.log(searchUrl);
            SimpleAxios.get(searchUrl).then((response)=>{
                if (response.data.state===20000){
                    this.$message.success("支付成功");
                    this.stopInterval();
                    location.href="/order/user/medicine";
                }
            })
        },
        stopInterval(){
            clearInterval(this.payment.interval);
        },
        // 切换分页
        changePage(page) {
            this.$router.replace('?page=' + page);
            this.loadMedicineList();
        },
        loadMedicineList(){
            let page = this.$router.currentRoute.query.page;
            if (!page) {
                page = 1;
            }
            let medicineUrl=BaseUrl.USER_ALL+'/user/medicine/orderList?page='+page;
            console.log(medicineUrl);

            TokenAxios.get(medicineUrl).then((response)=>{
                let jsonResult=response.data;
                if (jsonResult.state===20000){
                    this.medicineList=jsonResult.data.list;
                    this.currentPage = jsonResult.data.pageNum;
                    this.pageSize = jsonResult.data.pageSize;
                    this.total = jsonResult.data.total;
                }
            });
        },

    },
    created() {
        this.loadMedicineList();

    },
    mounted() {
        this.loadCurrentLoginInfo();
    }
}
</script>